<div class="box-container">
    <p class="process-bar" (click)="openProgressModal()">
        <b><i nz-icon nzType="clock-circle" nzTheme="fill" class="yellow"></i> &nbsp;报送进度:</b>&nbsp;
        已报/未报:&nbsp;
        <span class="green">{{reportFinished}}</span>/
        <span class="red">{{reportUnfinished}}</span>&nbsp;
        <span class="green">（占比{{reportPercentage}}%）</span>&nbsp;
    </p>
    <div class="main-content">
        <div class="main-content-wrap">
            <div class="left-panel">
                <nz-tree
                    #objTreeComponent
                    [nzData]="listData"
                    [nzSelectedKeys]="currentNode"
                    nzExpandAll
                    (nzClick)="selectedAreaChanged($event)">
                    <!--<ng-template #nzTreeTemplate let-node>-->
                            <!--<span [ngClass]="{'ant-tree-switcher-line-icon': node.isLeaf}">-->
                                  <!--<span class="node-name">{{ node.title }}</span>-->
                            <!--</span>-->
                    <!--</ng-template>-->
                </nz-tree>

            </div>

            <div class="right-panel">
                <ng-container *ngIf="frId === 32">
                    <div class="iframe-box-container">
                        <div class="report-search-wrap">
                            <div class="year-wrap">
                                <strong>年度：</strong>
                                <nz-select
                                    nzAllowClear
                                    nzPlaceHolder="年度"
                                    [(ngModel)]="yearValue"
                                    (ngModelChange)="queryYhgqInfo()"
                                    style="width: 120px;margin-right: 30px;">
                                    <nz-option nzLabel="2020" [nzValue]="2020"></nz-option>
                                    <nz-option nzLabel="2019" [nzValue]="2019"></nz-option>
                                    <nz-option nzLabel="2018" [nzValue]="2018"></nz-option>
                                    <nz-option nzLabel="2017" [nzValue]="2017"></nz-option>
                                    <nz-option nzLabel="2016" [nzValue]="2016"></nz-option>
                                </nz-select>
                            </div>
                            <div class="month-wrap">
                                <strong>月份：</strong>
                                <nz-radio-group [(ngModel)]="monthPickerValue" [nzButtonStyle]="'solid'"
                                                (ngModelChange)="queryYhgqInfo()">
                                    <label nz-radio-button [nzValue]="3">4月</label>
                                    <label nz-radio-button [nzValue]="4">5月</label>
                                    <label nz-radio-button [nzValue]="5">6月</label>
                                    <label nz-radio-button [nzValue]="6">7月</label>
                                    <label nz-radio-button [nzValue]="7">8月</label>
                                    <label nz-radio-button [nzValue]="8">9月</label>
                                    <label nz-radio-button [nzValue]="9">10月</label>
                                    <label nz-radio-button [nzValue]="10">11月</label>
                                    <label nz-radio-button [nzValue]="13">夏秋灌</label>
                                    <label nz-radio-button [nzValue]="14">冬灌</label>
                                    <label nz-radio-button [nzValue]="15">全年</label>
                                </nz-radio-group>
                            </div>
                        </div>
                        <div class="main-content">
                            <div class="table-wrap">
                                <iframe [src]="iframeSrc" frameborder="0" style=""></iframe>
                            </div>
                        </div>
                    </div>
                </ng-container>
                <ng-container *ngIf="frId !== 32">
                    <!--<div class="right-top-box">-->
                        <!--<div class="content-top-bar">-->
                            <!--<div class="right-title">{{contentTitle}}</div>-->

                            <!--<div class="right-ctrl-box">-->
                                <!--<div>-->
                                    <!--日期：-->
                                    <!--<nz-date-picker [ngModel]="today" nzDisabled></nz-date-picker>-->
                                    <!--&lt;!&ndash;<nz-radio-group [nzButtonStyle]="'solid'" [(ngModel)]="irrigateType" (ngModelChange)="selectedAreaChanged(currId)" style="margin-left: 15px">&ndash;&gt;-->
                                    <!--&lt;!&ndash;<label nz-radio-button nzValue="1">夏秋灌</label>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<label nz-radio-button nzValue="2">冬灌</label>&ndash;&gt;-->
                                    <!--&lt;!&ndash;</nz-radio-group>&ndash;&gt;-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->

                        <!--<div class="right-top-content">-->
                            <!--<div style="width: 100%">-->
                                <!--<nz-table-->
                                    <!--#groupingTable-->
                                    <!--[nzData]="tableData"-->
                                    <!--nzBordered-->
                                    <!--nzSize="middle"-->
                                <!--&gt;-->
                                    <!--<thead>-->
                                    <!--<tr>-->
                                        <!--<th>名称</th>-->
                                        <!--<th>用水量（亿m³）</th>-->
                                    <!--</tr>-->
                                    <!--</thead>-->
                                    <!--<tbody>-->
                                    <!--<tr *ngFor="let data of groupingTable.data">-->
                                        <!--<td>{{ data.trWrName }}</td>-->
                                        <!--<td>{{ data.val }}</td>-->
                                    <!--</tr>-->
                                    <!--</tbody>-->
                                <!--</nz-table>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="right-bottom-box">-->
                        <!--<div class="charts-container">-->
                            <!--<div echarts [options]="basicOpts" [merge]="customOpts" class="charts-cell"></div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="main-container">
                        <div class="main-content">
                            <div class="content-body">
                                <div class="content-top-bar">
                                    <div>
                                        <nz-radio-group [nzButtonStyle]="'solid'" [(ngModel)]="reportType" (ngModelChange)="getMngGridData()"
                                                        style="margin-left: 15px">
                                            <label nz-radio-button nzValue="1">月度报表</label>
                                            <label nz-radio-button nzValue="2">灌季年度报表</label>
                                        </nz-radio-group>
                                        <span style="margin-left: 20px">单位： 亿m³</span>
                                    </div>

                                    <div *ngIf="isGhMng">
                                        <nz-radio-group [(ngModel)]="radioValue" (ngModelChange)="getMngGridData()">
                                            <label nz-radio nzValue="GHYS">固海扬水</label>
                                            <label nz-radio nzValue="GHKG">固海扩灌</label>
                                        </nz-radio-group>
                                    </div>
                                </div>

                                <div *ngIf="reportType === '1'">
                                    <nz-table #monthlyTable
                                              [nzData]="monthlyTableData"
                                              nzBordered
                                              nzSize="middle">
                                        <thead>
                                        <tr>
                                            <th rowspan="2">名称</th>
                                            <ng-container *ngFor="let title of monthlyHeadArr">
                                                <th [colSpan]="title !== '比计划超节情况' ? 2 : 4">{{title}}</th>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <ng-container *ngFor="let title of monthlyHeadArr">
                                                <th>本月</th>
                                                <th *ngIf="title === '比计划超节情况'">%</th>
                                                <th>累计</th>
                                                <th *ngIf="title === '比计划超节情况'">%</th>
                                            </ng-container>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr *ngFor="let data of monthlyTable.data" class="editable-row">
                                            <ng-container *ngFor="let key of monthlyKeyArr">
                                                <td>{{ data[key] }}</td>
                                            </ng-container>
                                        </tr>
                                        </tbody>
                                    </nz-table>
                                </div>

                                <div *ngIf="reportType === '2'">
                                    <nz-table #yearlyTable
                                              [nzData]="yearlyTableData"
                                              nzBordered
                                              nzSize="middle">
                                        <thead>
                                        <tr>
                                            <th rowspan="2">名称</th>
                                            <ng-container *ngFor="let title of monthlyHeadArr">
                                                <th [rowSpan]="title !== '比计划超节情况' ? 2 : 1" [colSpan]="title !== '比计划超节情况' ? 1 : 2">{{title}}</th>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <th>水量</th>
                                            <th>%</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr *ngFor="let data of yearlyTable.data" class="editable-row">
                                            <ng-container *ngFor="let key of yearlyKeyArr">
                                                <td>{{ data[key] }}</td>
                                            </ng-container>
                                        </tr>
                                        </tbody>
                                    </nz-table>
                                </div>

                                <div style="margin-top: 10px">
                                    <nz-table #areaTable
                                              [nzData]="areaTableData"
                                              nzBordered
                                              [nzFrontPagination]="false"
                                              nzSize="middle">
                                        <thead>
                                        <tr>
                                            <th colspan="2">受益单位</th>
                                            <!--                        <th>合计</th>-->
                                            <th *ngFor="let title of areaHeadArr">{{title}}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr *ngFor="let data of areaTable.data;let i = index" class="editable-row">
                                            <td rowspan="2" *ngIf="i === 0" style="width: 120px">合计</td>
                                            <td rowspan="2" *ngIf="i === 2" style="width: 120px">农业用水</td>
                                            <td rowspan="2" *ngIf="i === 4" style="width: 120px">工业用水</td>
                                            <td rowspan="2" *ngIf="i === 6" style="width: 120px">生活用水</td>
                                            <td rowspan="2" *ngIf="i === 8" style="width: 120px">生态用水</td>
                                            <td rowspan="2" *ngIf="i === 10" style="width: 120px">区外供水</td>
                                            <td style="width: 100px">{{i%2 === 0 ? '本月' : '累计'}}</td>

                                            <ng-container *ngFor="let key of areaHeadArr">
                                                <td>
                                                    {{ data[key] }}
                                                </td>
                                            </ng-container>
                                        </tr>
                                        </tbody>
                                    </nz-table>
                                </div>
                            </div>

                        </div>

                    </div>
                </ng-container>

            </div>
        </div>
    </div>
</div>
<nz-modal class="custom-modal" nzWidth="900" [(nzVisible)]="progressModalShow" nzTitle="水情月报报送情况"
          (nzOnCancel)="closeProgressModal()" [nzFooter]="null">
    <nz-table
        #dataTable
        nzBordered
        nzShowPagination
        [nzPageSize]="10"
        [nzData]="progressData"
        nzSize="middle">
        <thead>
        <tr>
            <th>管理处</th>
            <th>报送状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let row of dataTable.data">
            <td>{{ row.frName }}</td>
            <td [ngClass]="{'green': row.statu === 2, 'red': row.statu === 1}">{{ row.status }}</td>
            <td>
                <a class="red" *ngIf="row.statu === 1">通知</a>
            </td>
        </tr>
        </tbody>
    </nz-table>
</nz-modal>
